import echarts from 'echarts'
import {deep_clone,merge} from '@/common/tool'
let myChart=null
const series_option={
    smooth: true,
    type: 'line',
    symbol: 'none',
}
const legend={
    bottom:0,
    data:[],
    itemGap: 20,
}
const option = {
    grid:{
        top:20,
        // left:60,
        // right:100
        // bottom:30
    },
    xAxis: {
        boundaryGap: false,
        type: 'category',
        axisTick:{		//刻度
            show:true
        },
        data:[],
        axisLabel: {
            show: true,
            textStyle: {
                color: '#fff'
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLabel:{
            textStyle: {
                color: '#fff'
            }
        }
        
        // min:0,
        // max:100
    },
    series: []
}

export default {
    props:['data','attrs'],
    render: function (h) {
        return h('div',{
            ref:'charts',
            style:{
                width:'100%',
                height:'100%'
            }
        })
    },
    methods:{
        change(data){
            const _option=myChart.getOption();
            data.forEach((el,index)=>{
                _option.xAxis[index].data=Object.keys(el)
                _option.series[index].data=Object.values(el)
            })
            myChart.setOption(_option);
        }
    },
    mounted(){
        myChart = echarts.init(this.$refs.charts)
        const _option=deep_clone(option)
        // const _legend=deep_clone(legend)
        this.data.forEach(el=>{
            const series=deep_clone(series_option)
            series.name=el.name
            // _legend.data.push(el.name)
            series.data=Object.values(el.data)
            _option.xAxis.data=Object.keys(el.data)
            _option.series.push(series)
        })
        // if(_legend.data.length>1)
        //     _option.legend=_legend
        myChart.setOption(this.attrs?merge(_option,this.attrs):_option);
    }
}